import base from "../base.js";
import cinemasApi from "../../api/cinemas.js"
export default class extends base {
    constructor(props) {
        super(props)
        this.data = {
            curpage: 1,
            eachPage: 10,
            total: 0,
            maxPage: 0,
            rows: []
        }

    }
    render() {
        this.$el.html(`
        <h1>影院列表</h1>
         <table class="layui-hide" id="test" lay-filter="test"></table>
         <div id="test1"></div>
    `);
        this.tableEle = layui.table;
        // console.log(this.tableEle);
        this.tableEle.render({
            elem: '#test'
            , cols: [[
                { field: '_id', width: 220, title: 'ID', fixed: "left" }
                , { field: 'name', width: 250, title: '影院名' }
                , { field: 'phone', width: 150, title: '联系方式' }
                , { field: 'address', title: '联系地址', }
                , {
                    field: '', title: '是否营业',width: 150,  templet: res => {
                        return `
                        ${res.status ? "是" : "否"}
                    `
                    }
                },
                , {
                    field: '_id',
                    title: '操作',
                    templet: (res) => {
                        const { _id } = res
                        return `
                      <a href="#/info/cinimgs/${_id}" class="layui-btn layui-btn-normal layui-btn-xs" lay-event="check">查看图片</a>
                      <a href="#/info/updatecinemas/${_id}" class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
                      <a href="#/info/updatecinemas/${_id}"class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                      <a href="#/info/theaters/${_id}" class="layui-btn layui-btn-normal layui-btn-xs" lay-event="check1">查看放映厅</a>
                      `
                    }
                }
            ]]
        });
        this.laypageEle = layui.laypage;
    };

    async getcinemas() {
        const { curpage, eachPage } = this.data
        this.data = await cinemasApi.get({ curpage, eachPage })
        this.rerender();

    }
    handle() {
        //工具条事件
        this.tableEle.on('tool(test)', obj => {
            //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            console.log("666");
            if (layEvent === 'edit') { //查看
                // console.log(this.data);
                // location.hash = `#/info/updatecinimgs/${this.data.cinemas._id}`;
            } else if (layEvent === 'del') { //删除
                // console.log(888);
            }
        });

    }
    rerender() {
        this.tableEle.reload('test', {
            data: this.data.rows
        });
        //分页
        this.laypage = layui.laypage;
        //执行一个laypage实例
        this.laypage.render({
            elem: 'test1' //注意，这里的 test 是 ID，不用加 # 号
            , count: this.data.total //数据总数，从服务端得到
            , limit: this.data.eachPage
            , limits: [10, 20, 30, 40, 50]
            , curr: this.data.curPage
            , layout: ['prev', 'page', 'next', "groups", "count", "limit"]
            , jump: async (obj, first) => {
                //obj包含了当前分页的所有参数，比如：
                // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                // console.log(obj.limit); //得到每页显示的条数

                //首次不执行
                if (!first) {
                    this.data.curPage = obj.curr;
                    this.data.eachPage = obj.limit;

                    const { curPage, eachPage } = this.data;
                    this.data = await cinemasApi.get({ curPage, eachPage });

                    this.table.reload('test', {
                        data: this.data.rows,
                        limit: this.data.eachPage
                    });
                }
            }
        });
    }
    async mounted() {
        this.getcinemas();
    }
}
